<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/data.js"></script>

</head>

<body style="height: 3000px;">
    <!-- 网站顶部导航开始 -->
    <header class="header">
        <div class="content">
            <p>
                <strong>欢迎来到尚品汇！请 </strong>
                <a href="#">登录</a><a href="#">注册</a>
            </p>
            <div>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                <a href="#">我的订单</a>
                </ul>
            </div>
    </header>
    <!-- 网站顶部导航结束 -->

    <!-- 网站logo及搜索栏部分 - 开始 -->
    <div class="content">
        <h1 class="logo" title="尚品汇">
            <a href="#"><img src="./images/Logo.png" alt="尚品汇"></a>
        </h1>
        <div class="searchbox">
            <form action="#" method="post">
                <input type="text" name="" id="">
                <input type="submit" name="" id="" value="搜索">
            </form>
        </div>
    </div>
    <!-- 网站logo及搜索栏部分 - 结束 -->

    <!-- 网站导航栏 - 开始 -->
    <nav class="nav">
        <div class="content">
            <h3>
                <a href="#">全部商品分类</a>
            </h3>
            <ul>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 网站导航栏 - 结束 -->

    <!-- 内容主体开始 -->
    <div class="content">
        <div class="crumbbox">
            <!-- <a href="#">手机、数码、通讯</a> /
            <a href="#">手机</a> /
            <a href="#">数码、通讯</a> /
            <span>iphone 6S系</span> -->
        </div> 
        <div class="mainBox">
            <div class="mainBox_l">
                <div class="sImgBox">
                    <img src="./images/s1.png" alt="">
                    <i class="mask"></i>
                    <div class="bigImgBox"></div>
                </div>
                <div class="sImgList">
                    <a href="javascript:;">&lt;</a>
                    <div class="sImgMid">
                        <ul>
                            <!-- <li>
                                <img src="./images/s1.png" alt="">
                            </li>
                            <li>
                                <img src="./images/s2.png" alt="">
                            </li>
                            <li>
                                <img src="./images/s3.png" alt="">
                            </li>
                            <li>
                                <img src="./images/s1.png" alt="">
                            </li>
                            <li>
                                <img src="./images/s2.png" alt="">
                            </li>
                            <li>
                                <img src="./images/s3.png" alt="">
                            </li> -->
                        </ul>
                    </div>
                    <a  href="javascript:;">&gt;</a>
                </div>
            </div>
            <div class="mainBox_r">
                
            </div>
        </div> 
    </div>
    <!-- 内容主体结束 -->

    <!-- 页面下部开始 -->
    <div class="content main_bot">
        <div class="main_bot_l">
            <div class="tabBtnBox">
                <a class="active">相关分类</a>
                <a>推荐品牌</a>
            </div>
            <div class="tabListBox">
                <div class="show">
                    <ul>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">手机</a></li>
                    </ul>
                    <ol>
                        <li>
                            <img src="./images/part01.png" alt="">
                            <p>
                                <strong>Apple苹果iPhone 6s (A1699)</strong>
                                <em>¥6088.00</em>
                            </p>
                            <div><a href="#">加入购物车</a></div>
                        </li>
                    </ol>
                </div>
                <div>隐藏div</div>
            </div>
        </div>
        <div class="main_bot_r">
            <div class="main_bot_r_t">
                <h4>选择搭配</h4>
                <div class="main_bot_r_t_box">
                    <div>
                        <img src="./images/l-m01.png" alt="">
                        <p>￥<i>5299</i></p>
                        <em>+</em>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/dp01.png" alt="">
                            <p>Feless费勒斯VR</p>
                            <label><input type="checkbox" value="50" name=""> 50</label>
                        </li>
                        <li>
                            <img src="./images/dp02.png" alt="">
                            <p>Feless费勒斯VR</p>
                            <label><input type="checkbox" value="50" name=""> 50</label>
                        </li>
                        <li>
                            <img src="./images/dp03.png" alt="">
                            <p>Feless费勒斯VR</p>
                            <label><input type="checkbox" value="50" name=""> 50</label>
                        </li>
                        <li>
                            <img src="./images/dp04.png" alt="">
                            <p>Feless费勒斯VR</p>
                            <label><input type="checkbox" value="50" name=""> 50</label>
                        </li>
                    </ul>
                    <div>
                        <p>已购0件商品</p>
                        <p>套餐价</p>
                        <p>¥<i>5299</i></p>
                        <p><button>加入购物车</button></p>
                    </div>
                </div>
            </div>
            <div class="main_bot_r_b">
                <ul class="btnBox">
                    <li class="active">
                        商品介绍
                    </li>
                    <li>
                        规格包装
                    </li>
                    <li>
                        商品介绍
                    </li>
                    <li>
                        商品介绍
                    </li>
                    <li>
                        商品介绍
                    </li>
                </ul>
                <ol class="boxList">
                    <li class="show">内容区1</li>
                    <li>内容区2</li>
                    <li>内容区3</li>
                    <li>内容区4</li>
                    <li>内容区5</li>
                </ol>
            </div>
        </div>
    </div>

    <script src="./js/main.js"></script>
</body>

</html>